<template>
 <div class="details">
    <waterfall :col="col" :data="currentPageData" :gutterWidth="30" :width="315">
      <template>
        <div class="cell-item" v-for="(item, index) in currentPageData"   :key="index"  >
          <img :src="getImageUrl(item.image)" alt=""   @click="getRelic(item)"/>
          <div class="item-body">
            <div class="item-desc">{{ item.name }}</div>
            <div class="item-footer">
             <div class="footer-left">
              {{ item.groupType }} {{ item.decadeType }}
             </div> 
             <div class="save" @click="collectionRelic(item)">
              <i class="iconfont icon-shoucang" ></i>
             </div>
            </div>
          </div>
        </div>
      </template>
    </waterfall>
  </div>
</template>

<script>
import {collectionRelic} from '@/api/all'
export default {
  components:{
  },
    props:{
        currentPageData:{ 
        type: Array,//所有数据
        default(){}
       },
    },
    data(){
        return{
          col: 4,
        }
    },
    watch: {
      currentPageData(newVal, oldVal){
    // newVal是新值，oldVal是旧值
        this.currentPageData = newVal
      }
     },
    methods:{
      getImageUrl(imageName){
      const prefix =this.$imagePrefix
      console.log(prefix)
      return `${prefix}${imageName}`;  
    },
      getRelic(relic){
        this.$router.push({ 
          name: 'Relic' ,
          query:{relic:JSON.stringify(relic)}
         });  
      },
      async collectionRelic(item){
        let params={
          id:0,
          rid:item.rid,
          uid:this.$store.state.login.uid,
        }
        await collectionRelic(params).then(res=>{
          if(res.data.message==="Ok"){
            this.$message.success('收藏成功');
          }
          else{
            this.$message.error("您已经收藏过该文物，无需重复收藏！")
          }
         }).catch(error=>{
         console.log(error)
        });
    }
    }

}
</script>

<style lang="less" scoped>
.details{
  margin-top: 40px;
  margin-left:80px;
  margin-right:80px;

}
.item-body {
  margin: 9px;
  .item-desc {
    text-align: left;
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 18px;
    color: #D7FBE6;
    font-weight: bold;
    padding-bottom:8px;
    background-color:#5f806f
  }
  .item-footer{
    display: flex;
    justify-content: space-between;
    .footer-left{
      display: flex;
      align-items: center;
      font-family: Roboto;
      font-style: normal;
      font-weight: bold;
      font-size: 14px;
      line-height: 16px;
      color: #B6DBC9;
      background-color:#5f806f
    }
    .save {
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: SF Pro Display;
      font-style: normal;
      font-weight: normal;
      font-size: 15px;
      line-height: 17px;
      color: rgba(164,174,173, 0.4);
    }
    .save:hover{
      cursor: pointer;
      color: rgba(160,33,54, 0.7);
    }
  }
}
.cell-item {
  width: 100%;
  margin-bottom: 20px;
  background: #5f806f;
  border-radius: 4px;
  overflow: hidden;
  box-sizing: border-box;
  img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 1px -2px 20px #a9a7a7;
  }
}
</style>